<template>
  <div class="page-content">
    <!-- banner -->
    <div class="banner">
      <div class="banner-center-box">
        <img class="banner-img" src="@/assets/dataCenter/banner-img.png" alt="">
        <div class="banner-left-box">
          <h2><span>全</span>球16个服务器位置</h2>
          <p>加入裸机云联盟加入裸机云联盟加入裸机云联盟</p>
          <p>加入裸机云联盟加入裸机云联盟加入裸机云联盟加入裸机云联盟加入裸机云联盟</p>
          <span class="banner-btn">立即购买</span>
          <span class="banner-btn help-btn">帮助中心</span>
        </div>
        <div class="banner-right-box"></div>
      </div>
    </div>
    <!-- banner end-->

    <!-- data center switch -->
    <div class="data-center-content">
      <div class="area-center-box">
        <div class="area-name-box">
          <nav>
            <span class="nav-item"
                  @click="getDataCenterByArea('')"
                  :class="{'active': !areaId}">
              所有地区
            </span>
            <span class="nav-item" :class="{'active': areaId === items.id }"
                  @click="getDataCenterByArea(items.id)"
                  v-for="items in dataCenterList" :key="items.id">
              {{items.name}}
            </span>
          </nav>
          <div class="liner acive-span">
            <span :style="{transform : `translate3d(${lineLeft}%,0px,0px)`}"></span>
          </div>
        </div>
        <div class="area-img-content">
          <div class="area-img-box" :style="{left : `-${imgBtnCount*330}px`}">
            <div class="img-item" v-for="items in dataImgList" :key="items.id">
              <img :src="require('@/assets/dataCenter/'+ items.imgName + '.png')" alt="item-img">
              <div class="bottom-box">
                <h2>{{items.name}}</h2>
                <div class="countries">{{items.countries}}</div>
              </div>
            </div>
          </div>
        </div>
        <div class="area-btn-box">
          <span class="area-btn" :class="{'active': imgBtnCount>0 }" @click="navBtnClick('left')"><</span>
          <span class="area-btn"
                :class="{'active': dataImgList.length > 4 && imgBtnCount < dataImgList.length-4}"
                @click="navBtnClick('right')">
            >
          </span>
        </div>
      </div>
    </div>
    <!-- data center switch end-->

    <!-- map -->
    <div class="map-content">
      <div class="map-title-box">
        <h2>本地开发 全球部署</h2>
        <div class="map-desc">提供全球最大的网络，无论您或您的客户身在何处，您都可以启动并轻松扩展低延迟基础架构解决方案</div>
      </div>
      <div class="map-detail-content">

        <div class="map-item-box"
             :style="{top: items.points[0] + 'px',left: items.points[1] + 'px'}"
             @click="items.isShowDetail = !items.isShowDetail"
             v-for="items in mapItemList" :key="items.id">
          <div class="area-box"
               v-show="items.isShowDetail">
            <div class="img-box">
              <img :src="require('@/assets/dataCenter/'+ items.imgName + '.png')" alt="city-img">
            </div>
            <div class="area-name-box">{{items.name}}</div>
            <div class="btn-box"><span class="item-btn">测试速度</span></div>
          </div>
        </div>

        <div class="area-count-box">
          <h2>{{mapItemList.length}}个</h2>
          <div class="area-stit">地点</div>
        </div>
      </div>
      <div class="map-btn-content">
        <span class="map-btn">测试定位速度</span>
      </div>
    </div>
    <!-- map end-->

  </div>
</template>

<script>
  export default {
    name: 'DataCenter',
    data(){
      return{
        dataCenterList: [
          {
            id: 1,
            name: '北美',
            lineLeft: 315,
            childs: [
              {
                countries: '美国',
                name: '洛杉矶',
                imgName: 'luoshanji',
                points: [320,179],
                isShowDetail: false,
                id: 5
              },
              {
                countries: '美国',
                name: '希尔斯伯勒',
                imgName: 'xiershibole',
                points: [241, 142],
                isShowDetail: false,
                id: 6
              }
            ]
          },
          {
            id: 2,
            name: '欧洲',
            lineLeft: 615,
            childs: [
              {
                imgName: 'falankefu',
                countries: '德国',
                name: '法兰克福',
                points: [235, 645],
                isShowDetail: true,
                id: 7
              }
            ]
          },{
            id: 3,
            name: '亚洲',
            lineLeft: 900,
            childs: [
              {
                imgName: 'xianggang',
                countries: '中国',
                name: '香港',
                points: [293, 1079],
                isShowDetail: false,
                id: 1
              },
              {
                imgName: 'dongjing',
                countries: '日本',
                name: '东京',
                points: [280, 1138],
                isShowDetail: false,
                id: 2
              },
              {
                imgName: 'shouer',
                countries: '韩国',
                name: '首尔',
                points: [453, 985],
                isShowDetail: false,
                id: 3
              },
              {
                imgName: 'xinjiapo',
                countries: '新加坡',
                name: '新加坡',
                points: [356, 1045],
                isShowDetail: false,
                id: 4
              },
            ]
          }],
        mapItemList: [],
        dataImgList:[],
        areaId: '',
        lineLeft: 0,
        imgBtnCount: 0,
      }
    },
    created(){
      this.getDataCenterByArea();
    },
    methods:{
      initMapItemsList: function(){
        // this.dataCenterList.forEach(function(items) {
        //   if(items.childs[0]){
        //     items.childs.forEach(function(cItems) {
        //       this
        //     })
        //   }
        // })
      },
      getDataCenterByArea: function(id) {
        if(this.areaId === id){
          return;
        }
        let that = this;
        let datas = [];
        this.areaId = id;
        this.imgBtnCount = 0;
        this.dataCenterList.forEach(function(items,idx) {
         if(id && id === items.id){
           datas = items.childs;
           that.lineLeft = items.lineLeft;
         }
         if(!id && items.childs){
           that.lineLeft = 0;
           items.childs.forEach(function(citems) {
             datas.push(citems);
           })
           that.mapItemList = datas;
         }
        });
        this.dataImgList = datas;
      },
      navBtnClick: function(type) {
        if(type==='left'){
          if(this.imgBtnCount>0){
            this.imgBtnCount -=1;
          }
        }else{
          if(this.dataImgList.length > 4 && this.imgBtnCount < this.dataImgList.length - 4){
            this.imgBtnCount +=1;
          }
        }
      }
    }
  }
</script>

<style type="text/less" lang="less" scoped>
.page-content{
  min-height: 200px;
  min-width: 1380px;
}
.banner{
  background-image: url("../../assets/dataCenter/banner-bg.png");
  height: 742px;
  width: 100%;
  background-size: contain;
  background-repeat: no-repeat;
  background-position-x: right;
  .banner-center-box{
    position: relative;
    width: 1380px;
    margin: 0 auto;
    padding-top: 230px;
    color: #666666;
    .banner-img{
      position: absolute;
      right: 100px;
      top: 116px;
    }
    .banner-left-box{
      h2{
        font-size: 45px;
        color: #0656FF;
        margin-bottom: 50px;
        span{
          padding-bottom: 9px;
          border-bottom: 3px solid #FFCC33;
          border-radius: 1.5px;
        }
      }
      p{
        font-size: 17px;
        margin-bottom: 5px;
      }
      .banner-btn{
        display: inline-block;
        cursor: pointer;
        margin-top: 30px;
        color: #ffffff;
        font-size: 14px;
        padding: 7px 15px;
        border-radius: 5px;
        background:linear-gradient(90deg,#1B8AFF 1%,#646BFF 100%);
        &.help-btn{
          background:linear-gradient(90deg,#FED904 1%,#FFB743 100%);
          margin-left: 30px;
        }
      }
    }
  }
}
.data-center-content{
  background-image: url("../../assets/dataCenter/city-bg.png");
  background-repeat: no-repeat;
  background-size: cover;
  height: 830px;
  margin: 130px 0;
  .area-center-box{
    width: 1380px;
    margin: 0 auto;
    padding: 0 50px;
    .area-name-box{
      position: relative;
      padding-top: 130px;
      color: #666666;
      font-size: 18px;
      width: 1100px;
      margin: 0 auto;
      nav{
        display: flex;
        justify-content: space-between;
        padding: 0 20px 15px 5px;
      }
      .nav-item{
        /*width: 330px;*/
        cursor: pointer;
        padding: 0 20px;
        &.active{
          color: #0656FF;
        }
      }
      .liner{
        position: absolute;
        height: 2px;
        bottom: -2px;
        width: 100%;
        bottom: 0px;
        border-bottom: 2px solid #DEE8FF;
        & span{
          position: absolute;
          top: 0;
          z-index: 5;
          filter:alpha(opacity=0);
          width: 110px;
          height: 1px;
          border: 1px solid #0656FF;
          transition: all .5s;
          opacity: 1;
          filter:alpha(opacity=1);
          transform: translate3d(0%,0px,0px);
          &.acive-span{
            display: block;

          }
        }
      }
    }
  }
  .area-img-content{
    overflow: hidden;
  }
  .area-img-box{
    position: relative;
    padding: 80px 0 25px 0;
    display: flex;
    transition: all .5s;
    /*justify-content: space-between;*/
    .img-item{
      padding: 30px 50px 30px 40px;
      background-color: #ffffff;
      color: #999999;
      font-size: 14px;
      width: 280px;
      height: 335px;
      margin: 0 25px;
      &:first-child{
        margin-left: 0;
      }
      .bottom-box{
        text-align: center;
        margin-top: 30px;
      }
      h2{
        font-size: 20px;
        color: #333333;
      }
    }
  }
  .area-btn-box{
    text-align: center;
    .area-btn{
      display: inline-block;
      padding: 0 25px;
      font-size: 35px;
      color: #DBDBDB;
      cursor: pointer;
      &.active{
        color: #0656FF;
      }
    }
  }
}
.map-content{
  min-width: 1380px;
  margin: 0 auto 300px auto;
  padding: 0 30px;
  width: 1380px;
  .map-title-box{
    text-align: center;
    margin-bottom: 110px;
    h2{
      font-size: 28px;
      color: #0656FF;
    }
    .map-desc{
      font-size: 16px;
      color: #666666;
      width: 485px;
      margin: 0 auto;
      line-height: 26px;
      padding-top: 10px;
    }
  }
  .map-detail-content{
    position: relative;
    width: 100%;
    height: 750px;
    background-image: url("../../assets/dataCenter/map-bg.png");
    background-repeat: no-repeat;
    background-size: contain;
    .map-item-box{
      position: absolute;
      top: 50px;
      left: 50px;
      width: 12px;
      height: 12px;
      border-radius: 50%;
      cursor: pointer;
      background-color: #0656FF;
      &.point1{
        top: 235px;
        left: 142px;
      }
      .area-box{
        /*display: none;*/
        width: 220px;
        height: 200px;
        position: absolute;
        z-index: 5;
        top: -205px;
        left: -97px;
        padding: 15px 20px;
        cursor: default;
        background-color: #ffffff;
        box-shadow:0px 0px 18px 0px rgba(0, 0, 0, 0.1);
        .img-box{
          height: 100px;
          width: 100%;
          text-align: center;
          img{
            height: 100%;
            width: 85%;
          }
        }
        .area-name-box{
          text-align: center;
          padding: 15px 20px 6px 20px;
          font-size: 18px;
          color: #333333;
        }
        .btn-box{
          text-align: center;
          .item-btn{
            font-size: 14px;
            color: #0656FF;
            cursor: pointer;
            text-decoration: underline;
          }
        }
      }
    }
    .area-count-box{
      position: absolute;
      top: 70px;
      right: 32px;
      width: 170px;
      height: 170px;
      display: flex;
      flex-flow: column;
      justify-content: center;
      background-color: #ffffff;
      border-radius: 50%;
      color: #0656FF;
      font-size: 18px;
      text-align: center;
      padding: 20px;
      box-shadow:0px 0px 18px 0px rgba(0, 0, 0, 0.1);
      h2{
        margin: 0;
        font-size: 45px;
        color: #0656FF;
      }
    }
  }
  .map-btn-content{
    margin-top: 15px;
    text-align: center;
    .map-btn{
      display: inline-block;
      padding: 10px 25px;
      border: 1px solid #0656FF;
      border-radius: 5px;
      text-align: center;
      font-size: 15px;
      color: #0656FF;
      cursor: pointer;
      text-decoration: underline;
    }
  }
}
</style>